<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Exemplo CSS Grid - TI</title>
    <style>
        .grid-wrapper {
            display: grid;
            /* Define 2 colunas (lateral fixa e central flexível) e 3 linhas */
            /* A primeira coluna tem exatos 200px (fixa)
               e a segunda ocupa TODO o resto do espaço disponível (flexível). */
            grid-template-columns: 200px 1fr;
            /* A primeira linha tem  altura fixa de 80px. Ideal para logotipos e menus.
               A segunda linha tem altura de 1fr (uma fração). Ela ocupará TODO o espaço vertical restante da tela de forma flexível.
               A terceira linha tem altura fixa de 60px. Ideal para rodapés e copyright.*/
            grid-template-rows: 80px 1fr 60px;
            /* Cria um "corredor/espaçamento" de 10px entre as colunas e linhas */
            gap: 0px;
            /* O painel ocupará 90% da altura da tela visível
            1vh é igual a 1%*/
            height: 100vh;
        }

        body {
            padding: 0px;
            margin: 0px;
        }

        /* Definindo as áreas do Grid */
        header {
            grid-column: 1 / span 2;
            background: #34495e;
            color: white;
            text-align: center;                
        }
        nav {
            background: #fff9cb;
            padding: 20px;
        }
        main {
            background: #989898;
            padding: 20px;
        }
        footer {
            grid-column: 1 / span 2;
            background: #2c3e50;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-wrapper">
        <header>
            <h1>
                Dashboard de Monitoramento
            </h1>
        </header>
        <nav>Menu Lateral (esquerdo)</nav>
        <main>Conteúdo Principal: Gráficos de Redes e IA</main>
        <footer>
            © 2026 Tecnologia da Informação
        </footer>
    </div>
</body>
</html>